<template>
  <div class="home-new">
    <div class="home-new-title"><h3>每周上新</h3></div>
    <ul>
      <li v-for="item in newlist" :key="item.id">
        <img :src="item.list_pic_url" />
        <p>{{ item.name }}</p>
        <p><span>￥</span>{{ item.retail_price }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const newlist = [
  {
    id: 1,
    name: "商品1",
    list_pic_url: "/images/new1.jpg",
    retail_price: "100"
  },
  {
    id: 2,
    name: "商品2",
    list_pic_url: "/images/new2.jpg",
    retail_price: "200"
  }
];
</script>

<style lang="less" scoped>
.home-new {
  .home-new-title {
    text-align: center;
    font-size: 16px;
    margin-top: 1.6 rem;
    height: 50px;
    h3 {
      width: 50%;
      margin: 0 auto;
      padding-top: 8px;
      border-top: 2px solid #ccc;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49.5%;
      img {
      }
      p {
        font-size: 14px;
        text-align: center;
        margin: 0.5 rem 0;
      }
      span {
        color: red;
        font-size: 12px;
      }
    }
  }
}
</style>
